<template>
	<!--填写老的手机号码组件-->
	<div class="addOldPhoneBox">
		<ul>
			<li class="select-state"  @click="changeSatate">
				<span >国家和地区</span>
				<span class="fillInPhone-arrow"  ></span>
				<span class="change-satate" >{{countCity}}</span>
			</li>
			<li class="select-state">
				手机号： <span>+{{countNum}}</span> <input id="wode_laoshijihao" class="input-phone" type="tel"  value="" v-model.number="inputOldPhoneNumber"  placeholder="请输入已绑定手机号码"/>
			</li>
		</ul>
		<p v-if="flag" class="tip">{{tipText}}</p>
		<div :class="[submitBtnClass]" @click="clickAddOldPhoneNext">
			下一步
		</div>
		<codePicker :isShow="codePickerShow" @pushParsetData="counterCodeClick"></codePicker>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				flag:false,
				inputOldPhoneNumber:"",
				submitBtnClass:"submit-btn",
				tipText:"",
				codePickerShow:false,
				countCity:"中国大陆",
				countNum:"86"
			}
		},
		created:function () {
			this.$store.dispatch("hideNav")
		},
		watch:{
			inputOldPhoneNumber(){
				if(!this.inputOldPhoneNumber){
					this.submitBtnClass ="submit-btn"
				}else{
					this.submitBtnClass ="submit-btn1"
				}
			}
		},
		methods:{
			//切换国家
			changeSatate(){
				this.codePickerShow = true
			},
			//选择国家
			counterCodeClick(obj){
				 this.codePickerShow = false;
                 this.countCity = obj.en
                 this.countNum = obj.code
			},
			clickAddOldPhoneNext(){
				//this.$router.push(`/${this.$channel}/fillInPhone`)

				if(this.inputOldPhoneNumber){
					this.getOldPhone()
				}else{
					this.tipText = "请输入已绑定手机号码"
					this.flag = true
				}
			},
			getOldPhone(){
				//this.$router.push(`/${this.$channel}/fillInPhone`)
				 let params = {
           'mobile': this.inputOldPhoneNumber
         };
                  this.$http.post('/user/checkOldMobile',this.$qs.stringify(params)).then(
                    res => {
                        if(res.data.code=="000001"){
                        	//console.log(res.data.msg)
                        	this.tipText = res.data.msg
					        this.flag = true
					        this.inputOldPhoneNumber = ""
                        }else if(res.data.code=="000000"){
                        	this.$router.push(`/${this.$channel}/fillInPhone`)
                        }
                    },
                    err => {
                      console.log(err)
                    }
                  )
			}
		}
	}
</script>

<style scoped="scoped">
	.addOldPhoneBox ul{
		width: 90%;
		height: auto;
		margin: 0 auto;
		font-size: 32px;
		color: #0C0C0C;

	}
	.addOldPhoneBox ul li{
		width: 100%;
		height: 120px;
		/*background: pink;*/
		border-bottom: 1px solid  #C5C5C5;
	}
	.fillInPhone-arrow{
		width: 40px;
		height: 40px;
		border: 4px solid #DCDCDC;
		display: inline-block;
		float: right;
		transform: rotate(45deg);
		margin: 40px 40px 0 0 ;
		border-bottom: none;
		border-left: none;
	}
	.select-state{
		line-height: 120px;
	}
	.change-satate{
		float: right;
	}
	.input-phone{
		width: 440px;
		height: 118px;
		float: right;
		outline: none;
		border: none;
		background: white;
	/*	background: pink;*/
	}
	.inputCode{
		width: 200px;
		height: 118px;
		/*background: pink;*/
		outline: none;
		border: none;
		float: left;
	} .authcode{
		display:inline-block;
		width:300px;
		height:61px;
		background:rgba(220,220,220,1);
		border-radius:15px;
		float: right;
		margin: 32px 20px  0 0 ;
		text-align: center;
		line-height: 61px;
	}
	.select-state-yz{
		float: left;
		margin-top: 2px;
	}
	input::-webkit-input-placeholder {
        color: #B2B2B2;
        font-size: 30px;
        text-align: left;
    }
  .tip{
  	width: 750px;
  	text-align: center;
  	color:#CC3538 ;
  	margin-top: 50px;
  }
  .submit-btn1{
  	width:650px;
	height:80px;
	background:rgba(204,53,56,1);
	border-radius:15px;
	margin: 50px auto;
	color: white;
	text-align: center;
	line-height: 80px;
	font-size: 36px;
	position: absolute;
	top: 350px;
	left: 50px;
  }
    .submit-btn{
  	width:650px;
	height:80px;
	background: rgb(227, 167, 168);
	border-radius:15px;
	margin: 50px auto;
	color: white;
	text-align: center;
	line-height: 80px;
	font-size: 36px;
	position: absolute;
	top: 350px;
	left: 50px;
  }
  .tip{
  	width: 750px;
  	text-align: center;
  	color:#CC3538 ;
  	margin-top: 50px;
  }
</style>
